<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    // 如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 
    appendBody: {
        type: Boolean,
        default: false
    },
    width: {
        type: [String, Number],
        default: '1000'
    },
    // 可通过 插槽自定义
    title: {
        type: String,
        default: 'dialog'
    },
    // 遮罩层
    modal: {
        type: Boolean,
        default: true
    },
    // 关闭按钮显示状态
    showClose: {
        type: Boolean,
        default: false
    },
    // 使对话框水平垂直居中
    alineCenter: {
        type: Boolean,
        default: false
    },
    // 内容居中
    center: {
        type: Boolean,
        default: false
    },
    // 关闭时销毁=== v-if
    destroyDialog: {
        type: Boolean,
        default: false
    },
    // 拖拽
    draggable: {
        type: Boolean,
        default: false
    },
    // 让拖拽范围超出可视区
    overflow: {
        type: Boolean,
        default: false
    }

})
const dialogVisible = ref(false)
const emit = defineEmits(['update:modelValue'])

watch(() => props.modelValue, (val) => {
    dialogVisible.value = val
})
</script>

<template>
    <el-dialog v-model="dialogVisible" :alineCenter=props.alineCenter :draggable="props.draggable"
        :overflow="props.overflow" :show-close="props.showClose" :destroy-on-close="destroyDialog" :center="props.center"
        :modal="props.modal" :append-to-body="props.appendBody" :title="props.title" :width="props.width"
        :before-close="emit('update:modelValue', dialogVisible)">
        <!-- 自定义头部 -->
        <template #header="{ close, titleId, titleClass }">
            <div class="flex flex-row justify-between gap-4">
                <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left">
                        <CircleCloseFilled />
                    </el-icon>
                    Close
                </el-button>
            </div>
        </template>
        <!-- 自定义底部 -->
        <template #footer>
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogVisible = false"> Confirm
            </el-button>
        </template>

        This is dialog content.
    </el-dialog>
</template>

<style scoped></style>